<template>
	<view>
		<view class="ExchangeGoods-demo">
		  <van-row>
			<van-col span="9"><image :src="list.picUrl" mode="" style="width: 250rpx;height: 250rpx;"></image></van-col>
			<van-col span="14">
			  <p>{{list.productName}}</p>
			  <P style="color: #cccccc;font-size: 0.6rem;padding-top: 0.5rem">{{list.labelName}},{{list.labelUnit}}</P>
			</van-col>
		  </van-row>
		 <view class="xingxing">
			<span style="margin-right: 10px">满意程度</span>
			<uni-rate activeColor="red" v-model="orderComment.orderCommentLevel" @change="onChange"/>
			<span style="color: gray;font-size: 15px">{{level}}</span>
		  </view>
		  <van-cell-group>
			<van-field v-model="orderComment.orderCommentContent" rows="2" autosize label="评价：" type="textarea" maxlength="250" placeholder="请输入留言" show-word-limit />
		  </van-cell-group>
		  <van-cell title="上传凭证" align="left"/>
		  <view align="left" style="padding: 0.5rem">
			  <view style="float: left;" v-for="item in img">
			  	<image style="width: 5rem;height: 5rem;margin-left: 10rpx;" :src="item" mode=""></image>
			  </view>
			  <van-button @click="shangchuan">上传</van-button>
			  <van-button v-if="img.length>0" @click="qingchu">清除图片</van-button>
			<!-- <van-uploader
			 :file-list="fileList"
			 :max-count="4"
			 :multiple="true"
			 accept="image"
			 bind:after-read="onRead"
			></van-uploader> -->
		  </view>
		</view>
		<view style="text-align: center;">
			<van-button round type="danger" @click="evaluate()">提交评价</van-button>
		</view>
	</view>
</template>

<script>
	import { addOrderComment,uploadImagesComment } from "../../api/commodity/order_retreat";
	import local from '@/utils/localStorage.js';
	import {Toast} from "vant";
	export default {
		 components: {
			 
		 },
		data() {
			return {
			   img:[],
			  //订单列表评价的对象
			   list:{},
			   //添加评价的参数
			   orderComment:{
				 orderId:'',
				 productId:'',
				 orderCommentLevel:3,
				 orderCommentContent:'',
				 orderCommentPicture:'',
				 fileList:[],
				 urlList:[],
				 img0:undefined,
				 img1:undefined,
				 img2:undefined,
				 img3:undefined,
			   },
			   //评价级别
			   level:'一般',
			   //上传的图片
			   fileList:[],
			   urlList:[],
			   
								 
			}
		},
		//页面渲染前加载
		created(){
			this.list = JSON.parse(sessionStorage.getItem('list'));
			console.log(JSON.stringify(this.list));
		},
		methods: {
			//上传多图片
	// 		onRead (e) {
	// 		  //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
	// 		  let fd = new FormData()
	// 		  if (e instanceof Array && e.length) { // 判断是否是多图上传 多图则循环添加进去
	// 			e.forEach(item => {
	// 			  fd.append("files", item.file)//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
	// 			})
	// 		  } else {
	// 			fd.append("files", e.file)
	// 		  }
	// 		  uploadImagesComment(fd).then((res)=>{
	// 			if(res.data.code==200){
	// 			  this.urlList.push(res.data);
	// 			}else {
	
	// 			}
	// 			console.log(res);
	// 		  })
	// 		},
	
			//上传图片
			shangchuan(){
			  uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
				count: 4, //默认选择1张图片
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				success: (res) => {
					console.log(res.tempFilePaths); //成功则返回图片的本地文件路径列表 tempFilePaths
					this.img = res.tempFilePaths;
					let imgs = this.img.map((value, index) => {
						return {
								name: "files",
								uri: value
							}
					});
					uni.uploadFile({ //将本地资源上传到开发者服务器
						url:'http://localhost:8080/api/local/fabulous/upload', //接口地址
						files: imgs,
						header: {
							'contentType': "application/json;charset=UTF-8",
							'Accept': "application/json;charset=UTF-8",
							'token': local.get("token"),
						},//token添加
						success: (uploadFileRes) => {
							if(uploadFileRes.statusCode==200){
								var data = JSON.parse(uploadFileRes.data)
								this.orderComment.img0 = data.img0;
								this.orderComment.img1 = data.img1;
								this.orderComment.img2 = data.img2;
								this.orderComment.img3 = data.img3;
							}else{
								 Toast("上传失败");
								 this.img = [];
							}
						}
					});
					
				}
			  });
			},
			//清除图片
			qingchu(){
				this.img = [];
				this.orderComment.img0 = undefined;
				this.orderComment.img1 = undefined;
				this.orderComment.img2 = undefined;
				this.orderComment.img3 = undefined;
			},
			//提交评价
			evaluate(){
			  this.orderComment.orderId = this.list.orderId;
			  this.orderComment.productId = this.list.productId;
			  if(this.orderComment.orderCommentContent==''){
				 Toast("请填写您的评价后提交");
			  }else {
				addOrderComment(this.orderComment).then((res)=>{
				  if(res.data.code==200){
					uni.redirectTo({
						url:'/pages/mine/mine'
					});
					Toast.success("评价成功");
				  }else {
					  uni.redirectTo({
					  	url:'/pages/mine/mine'
					  });
					Toast.fail("评价失败");
				  }
				})
			  }
			},
			//星星评价
			onChange(value){
				console.log(JSON.stringify(value));
			  switch (value.value) {
				case 1:
				  this.level = '非常差';
				  break;
				case 2:
				  this.level = '差';
				  break;
				case 3:
				  this.level = '一般';
				  break;
				case 4:
				  this.level = '好';
				  break;
				case 5:
				  this.level = '非常好';
				  break;
			  }
			},
			
			
		},
		//同步数据
		watch:{
			
		},
	}
</script>

<style>
	.demo-nav{
	    position: relative;
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    justify-content: center;
	    height: 56px;
	    background-color: #fff;
	    font-size: 1.1rem;
	  }
	  .demo-nav__back{
	    position: absolute;
	    top: 16px;
	    left: 16px;
	    width: 24px;
	    height: 24px;
	    cursor: pointer;
	  }
	  .xingxing{
	    padding: 10px;
	    text-align:left;
	    font-size: 14px;
	  }
	  .ExchangeGoods-demo{
		   padding: 0.5rem;
	  }
</style>
